<template>
    <div class="member-management">
        <div class="header">
            <el-form :model="memberSearchForm" :inline="true">
                <el-form-item label="所属组织">
                    <el-select v-model="memberSearchForm.organization" placeholder="所属组织" clearable
                        class="search-input">
                        <el-option v-for="org in organizationOptions" :key="org.value" :label="org.label"
                            :value="org.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="memberSearchForm.role" placeholder="角色" clearable class="search-input">
                        <el-option v-for="role in roleOptions" :key="role.value" :label="role.label"
                            :value="role.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="memberSearchForm.name" placeholder="姓名" clearable class="search-input" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearchMember">查询</el-button>
                    <el-button @click="resetMemberForm">重置</el-button>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="handleAddMember" style="margin-left: auto;">添加成员</el-button>
        </div>
        <div class="cont">
            <el-table :data="memberList" border style="width: 100%" stripe>
                <el-table-column prop="account" label="账号" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="role" label="角色" />
                <el-table-column prop="organization" label="所属组织" />
                <el-table-column prop="organizationLevel" label="组织级别" />
                <el-table-column prop="phone" label="联系电话" />
                <el-table-column prop="site" label="权限电站" />
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <el-switch v-model="scope.row.status" active-text="启用" inactive-text="禁用" inline-prompt
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                            @change="handleMemberStatusChange(scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="权限">
                    <template #default="scope">
                        <el-button type="text" @click="handleEditMember(scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleDeleteMember(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <Pagination v-model:current-page="memberPagination.currentPage" v-model:page-size="memberPagination.pageSize"
            :total="memberPagination.total" @size-change="handleMemberSizeChange"
            @current-change="handleMemberPageChange" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Pagination from '@/components/Pagination.vue';

// 成员搜索表单
const memberSearchForm = ref({
    organization: '',
    role: '',
    name: ''
});

// 成员列表数据
const memberList = ref([
    {
        account: '10056898454',
        name: '何林',
        role: '管理员',
        organization: '****************公司',
        organizationLevel: '内部公司',
        phone: '15116042175',
        site: '-',
        status: true,
    },
    // ...更多数据...
]);

// 分页配置
const memberPagination = ref({
    total: 100,
    pageSize: 10,
    currentPage: 1
});

// 组织下拉选项
const organizationOptions = ref([
    { value: 'org1', label: '组织1' },
    { value: 'org2', label: '组织2' },
]);

// 角色下拉选项
const roleOptions = ref([
    { value: 'admin', label: '管理员' },
    { value: 'user', label: '普通用户' },
]);

// 搜索成员
const handleSearchMember = () => {
    console.log('成员搜索:', memberSearchForm.value);
};

// 重置成员搜索表单
const resetMemberForm = () => {
    memberSearchForm.value.organization = '';
    memberSearchForm.value.role = '';
    memberSearchForm.value.name = '';
    console.log('重置成员搜索条件');
};

// 添加成员
const handleAddMember = () => {
    console.log('添加成员');
};

// 编辑成员
const handleEditMember = (row: any) => {
    console.log('编辑成员:', row);
};

// 删除成员
const handleDeleteMember = (row: any) => {
    console.log('删除成员:', row);
};

// 修改成员状态
const handleMemberStatusChange = (row: any) => {
    console.log('成员状态变更:', row);
};

// 每页条数变化
const handleMemberSizeChange = (size: number) => {
    memberPagination.value.pageSize = size;
    console.log('成员每页条数:', size);
};

// 页码变化
const handleMemberPageChange = (page: number) => {
    memberPagination.value.currentPage = page;
    console.log('成员当前页:', page);
};
</script>

<style lang="scss" scoped>
.member-management {
    :deep(.el-form-item) {
        margin-bottom: 0;

        .el-form-item__label {
            line-height: 0.4rem;
        }
    }

    .header {
        display: flex;
        align-items: center;
        padding: 0.12rem 0.16rem;

        .search-input {
            width: 2rem;
        }
    }

    .cont {
        background: #fff;
        padding: 0 0.16rem 0.24rem;
        min-height: 75vh;
    }
}
</style>
